<template>
	<view>
		<view class="navBox" :class="showNav ? 'navWhite' : ''">
		    <view class="topNav" :style="'height:'+stHeight+'px'">
		    </view>
		    <view class="tabsBack">
		        <view @click="goBack()" class="blackbox">
		            <uni-icons type="left" size="24" :color=" showNav ? '#111':'#fff'"></uni-icons>
		        </view>
		        <view class="topTitle hiddenText">活动</view>
		        <view style="opacity: 0;" class="blackbox">
		            <uni-icons type="left" size="24" color="#ebebea"></uni-icons>
		        </view>
		    </view>
		</view>
		<view class="load" v-if="!loading">
			<view style="text-align: center;">正在加载...</view>
			<!-- <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon> -->
		</view>
		<block v-else>
			<view class="wrap">
				<!-- <view class="vague"></view> -->
				<swiper class="teacher" v-if="party.Banner.length" autoplay :interval='3000' :indicator-dots="party.Banner.length>1?true:false" circular indicator-color="rgba(0,0,0,0.4)" indicator-active-color="rgba(0,0,0,0.6)">
				  <swiper-item class="swiper-item" v-for="(item, index) in party.Banner" :key="index" @click="watchImg(index)">
				    <image :src="item" mode="aspectFill"></image>
						<view class="mackBox">
							
						</view>
				  </swiper-item>
				</swiper>
				<view class="main_body">
					<view class="title_body">
						<view class="title_tit">
							{{ $util.entitiesToUtf16(party.Title) }}
						</view>
						<view class="title_time">
							{{formatDateTime('ymdhi', (party.StartDate || party.ServerDate)) }} - {{ formatDateTime('hi', party.EndDate) }}
						</view>
						<view class="title_site" @click="openMap(party)">
							<view class="site_name">
								<view class="site_icon">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17370112486751311.png" mode="widthFix"></image>
								</view>
								<view class="site_tit">
									{{ party.Address || party.Place || '--'}}
								</view>
							</view>
							<view class="site_distance">
								<view class="count" v-if="party.Distance">
									{{(party.Distance).toFixed(2)}}km
								</view>
								<uni-icons type="right" size="14" color="#989898"></uni-icons>
							</view>
						</view>
					</view>
					<block v-if="party.TeamInfo">
						<view class="cirlist" :style="'background-image: url(' + (party.TeamInfo.Logo?party.TeamInfo.Logo:'') + ');'" @click.stop="nav_to('/pages/together/cirDetail?id='+party.TeamID)">
							<view class="cirinfobox">
								<image class="hdimg" :src="party.TeamInfo.Logo?party.TeamInfo.Logo:''" mode="aspectFill"></image>
								<view class="cirinfo">
									<view class="cirname">{{ party.TeamInfo.TeamName?$util.entitiesToUtf16(party.TeamInfo.TeamName):'' }}</view>
									<view class="cirrem hiddenText">{{ party.TeamInfo.Tips? $util.entitiesToUtf16(party.TeamInfo.Tips):'' }}</view>
								</view>
								<view class="cirjoin">
									<image class="joinimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png">
									</image>
									<view class="jointext">查看</view>
								</view>
							</view>
							<view class="blackshadow"></view>
						</view>
					</block>
					
					
					<view class="sign_body">
						<view class="sign_cell">
							<view class="sign_tit">
								<text class="sign_count">
									{{ party.Users ? party.Users.length : 0 }}
								</text>
								<text>人已报名，剩余名额：<text class="sign_lit">{{ numPeople }}</text></text>
							</view>
							<view class="sign_content" v-if="Array.isArray(party.Users) && party.Users.length" @click="$refs.signUser.open()">
								<view class="sign_img">
									<block v-for="(l, i) in party.Users" :key="i">
										<image v-if="i<8" :src="l.HeadImgUrl" mode="aspectFill"></image>
									</block>
									
								</view>
								<view class="sign_more">
									<view class="more_text">
										更多
									</view>
									<uni-icons type="right" size="14" color="#989898"></uni-icons>
								</view>
							</view>
							<!-- <view class="sign_content" v-else>
								<view class="sign_text">
									点击下方立即报名
								</view>
							</view> -->
						</view>
					</view>
					
					<view class="tab_body">
						<view class="tab_head">
							
							<view class="tab_cell" :class="tabID==item.id ? 'tab_active' : ''" v-for="(item,index) in tabArr" :key="index" @click="tabID=item.id">
								<text v-if="item.id==1">{{party.ActType}}</text>
								<text>{{item.name}}</text>
							</view>
							
						</view>
						<view class="tab_main" v-show="tabID==1">
							<view class="tab_word">
								<view class="word_cell">
									<!-- <view class="word_icon">
										<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17270717735641182.png" mode="aspectFill"></image>
									</view> -->
									<view class="word_content">
										<text class="word_tit">报名截止：</text>
										<text>{{ formatDateTime('ymdhi', (party.ServerDate || party.EndDate)) }}</text>
									</view>
								</view>
								<view class="word_cell">
									<!-- <view class="word_icon">
										<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1727071863193269.png" mode="aspectFill"></image>
									</view> -->
									<view class="word_content">
										<text class="word_tit">报名费用：</text>
										<!-- <text v-if="party.RegisterFee2 > 0 && party.IsFee != 0">男({{ party.RegisterFee }}元/人) | 女({{ party.RegisterFee2 }}元/人)
										</text>
										<text v-else>{{ party.IsFee == 0 ? '免费' : party.RegisterFee + '元/人' }}</text> -->
										<text>{{money}}</text>
									</view>
								</view>
								<view class="word_cell" v-if="party.Mobile">
									<!-- <view class="word_icon">
										<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/172707187699362.png" mode="aspectFill"></image>
									</view> -->
									<view class="word_content" @click="call">
										<text class="word_tit">联系电话：</text>
										<text>{{ party.Mobile}}</text>
									</view>
								</view>
							</view>
							
							<view class="tab_prove" @click="$refs.notice.open()">
								<view class="prove_cell">
									<view class="prove_icon">
										<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1727072645200325.png" mode="aspectFill"></image>
									</view>
									<view class="prove_text">
										报名须知/退改政策说明/签到说明
									</view>
								</view>
								<uni-icons type="right" size="16" color="#6a6a6a"></uni-icons>
							</view>
							
							<view class="tab_blurb">
								<view class="blurb_cell">
									<view class="blurb_tit">
										<view class="blurb_tag">
											
										</view>
										{{party.ActType}}介绍
									</view>
									<view class="blurb_content" v-if="party.Description">
										<rich-text preview :nodes="!textshow ? changeString(party.Description, 200) : party.Description" @itemclick="itemclick"></rich-text>
										
										<view class="blurb_btn" v-if="party.Description && party.Description.length > 200" @click="more">
											{{party.ActType}}详情{{ textshow ? '收起' : '更多' }}
										</view>
										
									</view>
								</view>
							</view>
						</view>
						
						<view class="tab_main" v-show="tabID==2">
							<view class="tab_blurb">
								<view class="blurb_cell">
									<view class="blurb_tit">
										<view class="blurb_tag">
											
										</view>
										注意事项
									</view>
									<view class="blurb_content">
										<rich-text preview :nodes="Desc.AttendDesc || '--'"></rich-text>
										
									</view>
								</view>
							</view>
						</view>
						
						<view class="tab_main" v-show="tabID==3">
							<view class="tab_blurb">
								<view class="blurb_cell">
									<view class="blurb_tit">
										<view class="blurb_tag">
											
										</view>
										免责声明
									</view>
									<view class="blurb_content">
										<rich-text preview :nodes="Desc.DeclarDesc || '--'"></rich-text>
										
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="height: 180rpx;"></view>
					<!--  v-if="party.Status == 0 || party.Status == 1" -->
					<view class="btn_body">
						
						<block v-if="party.UserID==user.UserID">
							<block v-if="!isEnd((party.RegisterEndDate || party.EndDate))">
								<!-- <view class="btn_cell" v-if="party.ActType == '赛事'" @click="signFun(0)">
									立即报名
								</view> -->
								<view class="btn_cell" v-if="party.ActType == '活动'">
									进行中
								</view>
								<view class="btn_cell btn_cancel" v-else>
									报名截止
								</view>
							</block>
							<view class="btn_cell btn_cancel" v-else>
								{{party.ActType}}已结束
							</view>
						</block>
						<block v-else>
							
							<view class="btn_cell btn_cancel" v-if="mySignInfo && mySignInfo.Status==2">
								已核销
							</view>
							<block v-else-if="is_signed && !party.IsEnd">
								<view class="btn_cell" @click="cancelSign()">
									查看核销码
								</view>
							</block>
							<block v-else>
						
								<block v-if="!isEnd((party.RegisterEndDate || party.EndDate))">
									<!-- <view class="btn_cell" v-if="party.ActType == '赛事'" @click="signFun(0)">
										立即报名
									</view> -->
									<view class="btn_cell" v-if="party.ActType == '活动' && !party.IsEnd" @click="signOrGoFun()">
										立即报名
									</view>
									<view class="btn_cell btn_cancel" v-else>
										报名截止
									</view>
								</block>
								<view class="btn_cell btn_cancel" v-else>
									{{party.ActType}}已结束
								</view>
							</block>
						</block>
						
						
						<!--  #ifdef MP-WEIXIN -->
						<view class="btn_share" @click="$refs.shareWX.open()">
							<view class="btn_icon">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1737364194397825.png" mode="aspectFill"></image>
							</view>
							<view class="btn_tit">
								分享
							</view>
						</view>
						<!-- #endif -->
						<!--  #ifdef APP-PLUS -->
						<view class="btn_share" @click="app_share">
							<view class="btn_icon">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1737364194397825.png" mode="aspectFill"></image>
							</view>
							<view class="btn_tit">
								分享
							</view>
						</view>
						<!-- #endif -->
					</view>
				</view>
				<uni-popup ref="signUser" type="bottom">
					<view class="signUser">
						<view class="sign_content">
							<view class="signup_tit">
								<view class="tit">
									报名列表({{ party.Users ? party.Users.length : 0 }})
								</view>
								<view class="signup_close" @click="$refs.signUser.close()">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1727082247483249.png" mode="aspectFill"></image>
								</view>
							</view>
							<view class="signup_main" v-if="Array.isArray(party.Users) && party.Users.length">
								<view class="peoplebox" v-for="(l, i) in party.Users" :key="i">
								  <view class="p_info">
								    <view @click="nav_to(`/pages/user/user_visitor?id=${l.UserID}`)" class="head">
								      <image :src="l.HeadImgUrl" mode="aspectFill"></image>
								    </view>
								    <view class="user_box">
								      <view class="name_box">
								        <view class="name">{{$util.entitiesToUtf16(l.Name) }}</view>
								        <view class="member" v-if="getUserType(l.UserType) != 0"
								          :class="getUserType(l.UserType) == 1 ? 'member_hei_vip' : getUserType(l.UserType) == 2 ? 'member_wealth' : 'member_huan'">
								          {{ l.UserType }}</view>
								      </view>
								      <view class="user_lit">报名<text v-if="party.ActType == '活动'">活动</text><text v-else>赛事</text></view>
								      <view class="user_lit" @click.stop="$util.call(l.Mobile)" v-if="party.UserID == user.UserID && l.Mobile">
								        联系电话：{{ l.Mobile }}</view>
								    </view>
								  </view>
								  <view class="p_time">{{ getTime(l.CreateTime) }}</view>
								</view>
							</view>
							<view class="signup_null" v-else>
								暂无报名人员
							</view>
						</view>
						<view class="signup_copy" v-if="isMaster" @click="copyRoll">
							复制名单
						</view>
					</view>
				</uni-popup>
				
				<uni-popup ref="notice" type="bottom">
					<view class="signUser">
						<view class="sign_content">
							<view class="signup_tit">
								<view class="tit">
									须知
								</view>
								<!-- <view class="signup_close" @click="$refs.notice.close()">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1727082247483249.png" mode="aspectFill"></image>
								</view> -->
							</view>
							<view class="signup_main" >
								<view class="signup_content">
									<view class="content_cell" v-if="Desc.SignDesc">
										报名须知：{{Desc.SignDesc}}
									</view>
									<view class="content_cell" v-if="Desc.ReturnDesc">
										退改须知：{{Desc.ReturnDesc}}
									</view>
									<view class="content_cell" v-if="Desc.CheckDesc">
										签到须知：{{Desc.CheckDesc}}
									</view>
								</view>
							</view>
							
						</view>
						<view class="signup_copy" @click="$refs.notice.close()">
							我知道了
						</view>
					</view>
				</uni-popup>
			</view>
			
			
			<view class="warp">
			
			  <view class="popBox" v-show="popShow">
			    <view class="popMask"></view>
			    <view class="popCenter">
			      <view class="popContent">
			        <view class="popTitle">
			          报名资料
			          <view class="popClose" @click="closePop">
			            <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/del.png" mode="widthFix" />
			          </view>
			        </view>
			
			        <view class="popInfo">
			          <view class="infoCell">
			            <view class="infoName">姓名</view>
			            <view class="infoInp">
			              <input type="text" placeholder="请输入您的姓名" maxlength="12" v-model="popUser.name">
			            </view>
			          </view>
			          <view class="infoCell">
			            <view class="infoName">手机号</view>
			            <view class="infoInp">
			              <input type="number" placeholder="请输入您的手机号" maxlength="11" v-model="popUser.phone">
			            </view>
			          </view>
			          <view class="infoCell">
			            <!-- <view class="infoName">{{ party.RegisterFee == party.PreRegisterFee? '报名费' : '总报名费' }}</view> -->
			            <view class="infoName">报名费</view>
			            <view class="infoPrice">
			              {{ party.IsFee == 0 ? '免费' : party.RegisterFee + '元' }}
			            </view>
			          </view>
			          <!-- <view class="infoCell" v-if="party.RegisterFee != party.PreRegisterFee">
									<view class="infoName">预报名费</view>
									<view class="infoFPrice">
										{{ party.IsFee == 0 ? '免费' : party.PreRegisterFee + '元' }}
									</view>
								</view>
								<view class="infoCell">
									<view class="payTips">
										注：报名仅收取预报名费用，扣除预报名费用的余下费用由现场收取。
									</view>
								</view> -->
			        </view>
			        <view class="popTake">
			          <view class="popPay" @click="payApplication">{{ (party.IsFee == 0) ? '免费报名' : '支付报名费' }}</view>
			        </view>
			      </view>
			    </view>
			  </view>
				
				
				<!-- 微信 分享 转发好友、朋友圈 -->
				<!-- #ifdef MP-WEIXIN -->
				<uni-popup ref="shareWX" type="bottom">
				  <view class="x-share">
				    <button  hover-class="none" open-type="share" class="item" @click="$refs.shareWX.close()">
				      <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png" style="margin-bottom: -8rpx;"></image>
				      <span style="margin-bottom: -18rpx;font-size: 32rpx;">转发好友</span>
				    </button>
						<!-- <button class="item" @click="wxSharePYQ()">
						  <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png" style="margin-bottom: -8rpx;"></image>
						  <span style="margin-bottom: -18rpx;font-size: 32rpx;">分享朋友圈</span>
						</button> -->
				  </view>
				
				</uni-popup>
				
				<uni-popup ref="shareTips">
					<view class="share_tips">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715929661502368.png" mode="widthFix"></image>
						<view class="tips_close" @click="$refs.shareTips.close()">
							我知道了
						</view>
					</view>
				</uni-popup>
				<!-- #endif -->
			  <!-- APP 分享 转发好友、朋友圈 -->
			  <!-- #ifdef APP-PLUS -->
			  <uni-popup ref="share" type="bottom">
			    <view class="x-share">
			      <view class="item" @click="shareWX()">
			        <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image>
			        <span>转发好友</span>
			      </view>
			      <view class="item" @click="sharePYQ()">
			        <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"></image>
			        <span>分享朋友圈</span>
			      </view>
			    </view>
			
			  </uni-popup>
			  <!-- #endif -->
			</view>
		</block>
		
		
		
		
	</view>
  
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
export default {
  components: {topStatus},
  data() {
    return {
      imgArr: [
        "https://gd-hbimg.huaban.com/4a15005fef3f85742a648deefd7a90994f5278ab19eb8d-7ntWmV_fw658webp",
        "https://gd-hbimg.huaban.com/2f1a82fe77608434c7764f4a4f4f7c70bf15cd801dc41a-1LJeWK_fw658webp",
      ],
      imgIndex: 1,
      tabIndex: 1,

      id: "",
      party: {},
      formattedDate: "",
      is_signed: false,

      textshow: false,
      user: uni.getStorageSync("user"),
      isPhoneNull: false,
      popShow: false,
      popUser: {
        name: "",
        phone: "",
      },
			
			tabArr:[{id:1,name:'信息'},{id:2,name:'注意事项'},{id:3,name:'免责声明'}],
			tabID:1,
			
			address:{},
			Desc:{},
			loading:false,
			
			mySignInfo:false,
			
			showNav:false,
			stHeight:0
    };
  },
  async onLoad(e) {
    this.id = e.id;
    this.isPhoneNull = uni.getStorageSync("user").Phone;
    this.user = uni.getStorageSync("user")
		
    if (e.isShare == 1) {
      this.Get_Detail();
    }
    uni.$on("update", () => {
      this.Get_Detail();
    });
  },
  async onShow(){
    this.Get_Detail();
		this.GetActionDesc()
  },
	mounted() {
		let _this = this;
		uni.getSystemInfo({
			success: res => {
				_this.stHeight = res.statusBarHeight;
			},
			fail(err) {
				console.log(err);
			}
		})
	},
	onPageScroll(e) {
		let height = e.scrollTop
		// console.log(height);
		if(height > 220){
			this.showNav = true
		}else{
			this.showNav = false
		}
	},
  //分享朋友圈
  onShareTimeline() {
    const name = this.party.Title;
    // let title = this.party.ActType == "赛事" ? "赛事信息" : "活动信息";
    return {
      title: "【动魅】" + '活动' + " — " + name,
      query: "isShare=1&id=" + this.id,
    };
  },
  onUnload() {
    uni.$off("update");
  },
  computed: {
    // 状态格式
    newStatus() {
      return (s) => {
        return s == 0
          ? "报名中"
          : s == 1
            ? "进行中"
            : s == 2
              ? "已结束"
              : "已结束";
      };
    },
    getUserType(l) {
      return (l) => {
        if (!l) return 0;
        if (l.indexOf("黑金") != -1) {
          return 1;
        } else if (l.indexOf("金") != -1) {
          return 2;
        } else if (l.indexOf("体验") != -1) {
          return 3;
        } else {
          return 0;
        }
      };
    },
    isMaster(){
      return this.party.UserID == uni.getStorageSync("user").UserID
    },
		money(){
			let con = this.party.FeeRule
			if(con){
				if(con=='免费'){
					return con
				}
				if(con=='付费'){
					return this.party.RegisterFee+'元/人' || 0+'元/人'
				}
				if(con=='柜台结算' || con=='现场缴费'){
					return con + ' ' + this.party.RegisterFee+'元/人' || 0+'元/人'
				}
			}
		},
		numPeople(){
			let con = this.party.PeopleNum-(this.party.Users ? this.party.Users.length : 0)
			if(!con || con<=0){
				return 0
			}else{
				return con
			}
		}
  },

  onShareAppMessage(res) {
    //发送给朋友

    return {
      title: "【动魅】邀请您参加" + this.party.Title,
      path: `/pages/ball/ball_details?id=${this.party.ID}&pid=${this.UserID}`,
    };
  },
  methods: {
		goBack() {
			const pages = getCurrentPages();
			if (pages.length > 1) {
					// 如果页面栈长度大于1，则说明有上一页，可以返回
					uni.navigateBack();
			} else {
					// 如果没有上一页，则导航到首页
					uni.reLaunch({
							url: '/pages/tab/home'
					});
			}
		},
    // 点击复制名单
    copyRoll() {
      let that = this
      let list = that.party.Users || that.party.Item
      let str = ''
      for (let i = 0; i < list.length; i++) {
        let { Phone, TrueName, Sex, Name, Mobile,ClothSize } = list[i]
        Sex = Sex == 1 ? '男' : Sex == 0 ? '女' : '未知'
        ClothSize = ClothSize|| '未知尺码'
        // TrueName = TrueName || Name
        Mobile = Mobile || Phone
        str = str + `${Name} ${Mobile} ${Sex} ${ClothSize}\n`
      }
      uni.setClipboardData({
        data: str,
        success: function () {
          that.$pv.msg('已复制到剪切板')
        },
        fail: function () {
          that.$pv.msg('复制失败，请刷新重试')
        },
      });
    },
    // 关闭报名弹窗
    closePop() {
      this.popShow = false;
    },
    openPop() {
      const userName = uni.getStorageSync("user").Name || ''
      const userPhone = uni.getStorageSync("user").Phone || ''
      this.popUser.name = this.popUser.name == '' ? userName : this.popUser.name
      this.popUser.phone = this.popUser.phone == '' ? userPhone : this.popUser.phone
      this.popShow = true
    },
    // 支付预报名费用
    payApplication() {
      const { name, phone } = this.popUser;
      if (name == "") {
        this.$pv.msg("请输入您的姓名");
        return;
      }
      if (phone == "") {
        this.$pv.msg("请输入您的手机号");
        return;
      }
      if (this.party.IsFee == 0) {
        this.SingAction()
      } else {
        this.sub();
      }

    },
    more() {
      this.textshow = !this.textshow;
    },
    changeString(str, maxLength) {
      if (!str.length) return;
      if (str.length <= maxLength) {
        return str;
      }

      // 尝试截取字符串，直到找到一个完整的字符
      let end = maxLength;
      while (end > 0 && (str.charCodeAt(end - 1) & 0xc0) === 0x80) {
        end--;
      }
      return str.slice(0, end) + "...";
    },
    async actionSign() {
      let _this = this;
      await this.$api
        .post("/Action/ActionSign", {
          ID: this.party.ID,
        })
        .then((res) => {
          if (res.data == true) {
            this.$pv.msg("报名成功");
            this.Get_Detail();
          } else {
            this.$pv.msg("您已报过名");
          }
        });

      // setTimeout(()=>{
      // 	_this.nav_to(`/pages/tab/home`)
      // },1000)
    },
    signFun(i) {
      let user = uni.getStorageSync("user")
      let IsAuth = user?.IsAuth || 0
      if (IsAuth == 0) this.nav_to("/pages/start/start2");
      else {
        if (i == 0) {
          this.nav_to("/pages/match/enroll?id=" + this.party.ID);
        } else if (i == 1) {
          //   this.actionSign();
          this.openPop()
        }
      }
    },
		async signOrGoFun() {
			let _this = this
			let u = await this.$api.post('User/GetUserInfo', {
				ID: uni.getStorageSync('user').UserID
			});
			let user = u.data
			console.log('=》》》》》》》》》》》',user);
			if (user.IsAuth == 0) {
				uni.showModal({
					title: '温馨提示',
					content: '未注册用户不能报名，请先注册！',
					confirmText: '关闭',
					cancelText: '注册账号',
					success: function (res) {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1
							});
						} else if (res.cancel) {
							_this.nav_to('/pages/start/start2');
						}
					}
				});
			}else {
				if (user.Phone == '' || user.WechatNo == '') {
					uni.showModal({
						title: '温馨提示',
						content: '请完善您的联系方式',
						confirmText: '确定',
						success: function (res) {
							if (res.confirm) {
								_this.nav_to('/pages/user/user_edit');
							} else if (res.cancel) {

							}
						}
					});
				} else {
					this.nav_to(`/pages/ball/ball_join_confirm?id=${this.id}`);
				}
			}
		},
    async cancelSign() {
			let _this = this
			let con = this.party.Item.find(item=>item.UserID==uni.getStorageSync('user').UserID)
			if(!con){
				_this.$pv.msg('未找到报名信息');
				return
			}
			this.nav_to(`/pages/together/order_detail?id=${con.ActionCode}`)
   //    uni.showModal({
			// 	title: '温馨提示',
			// 	content: '您确认要取消报名吗',
			// 	showCancel: true,
			// 	success: async function (res) {
			// 		if (res.confirm) {
			// 			_this.$pv.load();
			// 			let r = await _this.$api.post('Appointment/UserCancel', {
			// 				ID: con.ID
			// 			});
			// 			if(r.data){
			// 				_this.$pv.msg('已取消');
			// 				uni.$emit('circleUpdate')
			// 				_this.Get_Detail();
			// 				_this.GetActionDesc()
			// 			}
						
			// 		}
			// 	}
			// });
    },
    getPhoneNumber(e) {
      let _this = this;

      uni.login({
        provider: "weixin",
        success: async (res) => {
          let d = {
            encryptedData: e.detail.encryptedData,
            code: res.code,
            aesIv: e.detail.iv,
          };

          let res1 = await _this.$api.post("User/GetPhoneNumber", d);

          if (JSON.stringify(res1.data) != "") {
            let dd = {
              Phone: res1.data,
            };

            let res2 = await _this.$api.post("User/BindMobile", dd);

            if (JSON.stringify(res2.data) == "true") {
              _this.isPhoneNull = true;
              let user = uni.getStorageSync("user")
              user.Phone = res1.data
              uni.setStorageSync('user', user);
              _this.popUser.phone = res1.data
              _this.$pv.msg("绑定号码完成，请确认是否报名");
            } else {
              _this.$pv.msg("绑定号码失败");
            }
          }
        },
        fail: (err) => {
          uni.showModal({
            content: "获取失败",
            showCancel: false,
          });
        },
      });
    },
    call() {
      uni.makePhoneCall({
        phoneNumber: this.party.Mobile,
        // 成功回调
        success: (res) => {
          console.log("调用成功!");
        }, // 失败回调
        fail: (res) => {
          // this.$pv.msg('暂无联系电话')
          console.log("调用失败!");
        },
      });
    },
    async publish() {
      this.nav_to(
        "/pages/dynamic/dynamic_add?a=" +
        this.party.ID +
        "&t=" +
        this.party.Title
      );
    },
    app_share() {
      this.$refs.share.open();
    },
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(
        /style="[^"]+"/gi,
        function (match, capture) {
          match = match
            .replace(/<p>/gi, '<p class="p_class">')
            .replace(/width:[^;]+;/gi, "max-width:100%;")
            .replace(/width:[^;]+;/gi, "max-width:100%;");
          return match;
        }
      );
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(/<a>/gi, '<a class="p_class "');
      newContent = newContent.replace(/<li>/gi, '<li class="p_class "');
      newContent = newContent.replace(/\<p/gi, '<p class="p_class "');
      newContent = newContent.replace(/\<span/gi, '<span class="p_class "');
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
      );
      return newContent;
    },
    formatDateTime(format, time) {
      let dateObj = new Date(time);
      let year = dateObj.getFullYear();
      let month = dateObj.getMonth() + 1;
      let day = dateObj.getDate();
      let hour = dateObj.getHours();
      let min = dateObj.getMinutes();
      let sec = dateObj.getSeconds();
      let dateStr = "";
      if (format.indexOf(format.toLowerCase("Y")) !== -1) {
        dateStr += year + ".";
      }
      if (format.indexOf(format.toLowerCase("m")) !== -1) {
        dateStr += month + ".";
      }
      if (format.indexOf(format.toLowerCase("d")) !== -1) {
        dateStr += day + " ";
      }
      if (format.indexOf(format.toLowerCase("h")) !== -1) {
        dateStr += String(hour).padStart(2, "0");
      }
      if (format.indexOf(format.toLowerCase("i")) !== -1) {
        dateStr += ":" + String(min).padStart(2, "0");
      }
      // if (format.indexOf(format.toLowerCase("s")) !== -1) {
      //   dateStr += ":" + String(sec).padStart(2, "0");
      // }
      return dateStr;
    },
    isEnd(t) {
      let now = Date.now();
      let time = new Date(t).getTime();
      if (now > time) return true;
      else return false;
    },
		getLocationSysc() {
			let _this = this;
			return new Promise((resolve, reject) => {

				uni.getLocation({
					type: "gcj02",
					success: function (res) {
						const defaultLocation = {
							latitude: res.latitude,
							longitude: res.longitude,
						};
						resolve(defaultLocation);
					},
					fail: function (err) {
						const defaultLocation = {
							latitude: 0,
							longitude: 0,
						};
						resolve(defaultLocation);
					},
				});
			});
		},
		openMap(item){
			if(!item.Place) return
			uni.openLocation({
				latitude:item.Latitude,
				longitude:item.Longitude,
				name:item.Place,
				success: function () {
					console.log('success');
				},
				fail: (err) => {
					console.log(err);
				},
			});
		},
		//限制时间范围
		
		
		async GetActionDesc(){
			let res = await this.$api.post("/Action/GetActionDesc", {
			  ID: this.id,
			});
			this.Desc = res.data
		},
    async Get_Detail() {
			this.address = await this.getLocationSysc()
      let res = await this.$api.post("/Appointment/Detail", {
        ID: this.id,
				User_Lat:this.address.latitude,
				User_Lng:this.address.longitude
      });

      this.party = res.data;
      if (!this.party) return;
			if(this.party.Item && Array.isArray(this.party.Item)){
				this.mySignInfo = this.party.Item.find(item=>item.UserID==uni.getStorageSync('user').UserID)
			}
			
			this.party.ActType = '活动'
			this.party.Banner = this.party.Banner ? this.party.Banner : this.party.Images
			this.party.Users = this.party.Users ? this.party.Users : this.party.Item
			this.party.Description = this.party.Description ? this.party.Description : this.party.Remark
			this.party.Mobile = this.party.Mobile ? this.party.Mobile : this.party.Phone
			this.party.ServerDate = this.party.ServerDate.split('T')[0]+ 'T' +this.party.ServerTime
			
			let nowtime = Date.now();
			let start = (new Date(this.party.ServerDate)).getTime()
			this.party.IsEnd = nowtime>start ? true : false
			
			let regeD = /,/g;
      const regex = /\["/;
      if (this.party.Banner.match(regex)) {
        this.party.Banner = JSON.parse(this.party.Banner);
      } else if(this.party.Banner.match(regeD)){
				this.party.Banner = this.party.Banner.split(',')
			}else {
				if(!this.party.Banner){
					this.party.Banner = [
						"https://golfdate.oss-cn-shenzhen.aliyuncs.com/logo-300.png",
					];					
				}else{
					this.party.Banner = [this.party.Banner]
				}
      }

      if (this.party.Description.length > 200) {
        this.textshow = false;
      } else {
        this.textshow = true;
      }
			
      this.party.Users = this.party.Users.filter((item, index) => {
    //     if (item.UserID == uni.getStorageSync("user").UserID) {
    //       this.is_signed = true;
				// 	console.log('1');
    //     }else{
				// 	console.log('2');
				// 	this.is_signed = false;
				// }
				return item.UserID!=this.party.UserID
      });
			this.is_signed = this.party.Users.some(item=>item.UserID==uni.getStorageSync("user").UserID)
			
			
      this.party.Description = this.party.Description.replace(/\n/g, "<br>");
      this.party.Description = this.formatRichText(this.party.Description);

      const startDate = new Date(res.data.StartDate);
      const endDate = new Date(res.data.EndDate);
      const startYear = startDate.getFullYear();
      const startMonth = startDate.getMonth() + 1; // 月份从0开始，需要加1
      const startDay = startDate.getDate();
      const startHours = startDate.getHours();
      const startMinutes = startDate.getMinutes();

      const endYear = endDate.getFullYear();
      const endMonth = endDate.getMonth() + 1; // 月份从0开始，需要加1
      const endDay = endDate.getDate();
      const endHours = endDate.getHours();
      const endMinutes = endDate.getMinutes();

      this.formattedDate = `${startYear}年${startMonth}月${startDay}日 ${String(
        startHours
      ).padStart(2, "0")}:${String(startMinutes).padStart(2, "0")}-${String(
        endHours
      ).padStart(2, "0")}:${String(endMinutes).padStart(2, "0")}`;
			this.loading = true;
    },
    async sub() {
      const isOnLine = this.party.PayType == '线上支付' ? true : false
      if (this.party.RegisterFee > 0 && isOnLine) {
        //需要支付费用

        // 支付请求
        let pres = await this.$api.post("Payment/PayV2", {
          total_fee: this.party.RegisterFee,
          EventType: "活动报名",
          EventID: this.party.ID,
          body: this.party.Title,
          // #ifdef MP-WEIXIN
          PayChannel: "weixin",
          // #endif
          // #ifdef APP
          PayChannel: "app",
          // #endif
        });
        // 已余额支付成功
        if (pres.data == 0) {
          // isPay = true;
        } else {
          // 支付成功返回的内容
          let payObj = JSON.parse(pres.data);
          let _this = this;
          // 调用uni支付API
          uni.requestPayment({
            // 服务提供商
            provider: "wxpay",
            // #ifdef APP
            orderInfo: payObj,
            // #endif
            // #ifdef MP-WEIXIN
            timeStamp: payObj.timeStamp,
            nonceStr: payObj.nonceStr,
            package: payObj.package,
            signType: payObj.signType,
            paySign: payObj.paySign,
            // #endif
            success(res) {
              _this.SingAction();
            },
            fail(err) {
              _this.$pv.msg("支付失败");
            },
          });
        }
      } else {
        this.SingAction();
      }
    },
    async SingAction() {
      let _this = this;
      const { name, phone } = this.popUser;
      let res = await _this.$api.post("/Action/ActionSign", {
        ID: _this.id,
        Mobile: phone,
        TrueName: name

      });

      if (JSON.stringify(res.data) == "true") {
        // 添加成功
        uni.showToast({
          title: "报名成功",
        });
        this.closePop()
        this.Get_Detail()
        const date = new Date();
        _this.party.Users.push({
          UserID: uni.getStorageSync("user").UserID,
          HeadImgUrl: uni.getStorageSync("user").HeadImgUrl,
          Name: uni.getStorageSync("user").Name,
          UserType: uni.getStorageSync("user").UserType,
          CreateTime: date,
        });
      } else {
        // 其他错误
        uni.showToast({
          title: "操作失败，请稍后重试",
          icon: "none",
        });
      }
    },

    golive() {
      uni.navigateTo({
        url: `/pages/dynamic/Picture_live?id=${this.id}`,
      });
    },
    watchImg(index) {
      uni.previewImage({
        current: index,
        urls: this.party.Banner,
      });
    },
		//富文本
		itemclick(e) {
			if (e.detail.node.name == 'img') {
				let img = e.detail.node.attrs.src;
				console.log('》》》》',img);
				this.SeeDatu(img);
			}
		},
		SeeDatu(imgUrl) {
			uni.previewImage({
				urls: [imgUrl],
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function (res) {},
				fail: function (res) {},
				complete: function (res) {},
			});
		},
    //app分享好友分享朋友圈
    sharePYQ() {
      const user = uni.getStorageSync("user");

      const pid = user.UserID;
      let id = this.ID;

      const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
      const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
      let shareUrl = BaseUrl + paseUrl;


      uni.share({
        provider: "weixin",
        scene: "WXSceneTimeline",
        type: 0,
        href: shareUrl,
        title: "【动魅】" + this.party.Title,
        summary: this.party.Remark,
        imageUrl:
          "https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg",
        success: (res) => {
          console.log("success:" + JSON.stringify(res));
          this.$refs.share.close();
        },
        fail(err) {
          console.log("fail:" + JSON.stringify(err));
        },
      });
    },
    shareWX() {
      const user = uni.getStorageSync("user");

      const pid = user.UserID;
      let id = this.ID;

      const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
      const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
      let sharUrl = BaseUrl + paseUrl;
      let _this = this;
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 5,
        imageUrl:
          "https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg",
        title: "【动魅" + this.party.GolfType + "】" + this.party.Title,
        miniProgram: {
          id: "gh_ff1a33213d99",
          path: "pages/ball/ball_details?id=" + id + "&pid=" + pid,
          type: 0,
          webUrl: sharUrl,
        },
        success: (res) => {
          console.log(
            "success:" + "pages/ball/ball_details?id=" + id + "&pid=" + pid
          );
          console.log("success:" + JSON.stringify(res));
          this.$refs.share.close();
        },
        fail(err) {
          console.log("fail:" + JSON.stringify(err));
        },
      });

      // this.is_app_share_show = false;
    },
		wxSharePYQ(){
			this.$refs.shareWX.close()
			this.$refs.shareTips.open()
		}
  },
};
</script>

<style lang="scss">
.navBox {
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    top: 0;
    left: 0;
    z-index: 999;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(255,255,255,0) 100%); /* 渐变颜色 */
		.topNav{
			background-color: #fff;
		}
    .tabsBack {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 14rpx;
    justify-content: space-between;
    .topTitle {
        width: 350rpx;
        color: #fff;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        overflow: hidden; /*超出部分隐藏*/
        white-space: nowrap; /*禁止换行*/
        text-overflow: ellipsis; /*省略号*/
    }
    }
}
.navWhite{
	background: #fff;
	.topTitle{
		color: #000 !important;
	}
}
button{padding: 0;margin: 0; border: 1px solid transparent;}
button::after{ border: none; }
.button-hover {
	color:transparent;
	background-color:transparent;
}
page {
  background-color: #fdf4ff;
}

image {
  width: 100%;
  height: 100%;
}

.line {
  width: 100%;
  height: 4rpx;
  background-color: #3b3b3b;
}

.warp {
  .teacher {
    box-sizing: border-box;
    position: relative;
    height: 650rpx;
		
    swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-item {
      width: 100%;
      height: 100%;
      background-color: #000;
			display: flex;
			align-items: center;
			justify-content: center;
			
    }

    .num {
      position: absolute;
      right: 0;
      bottom: 50rpx;
      background-color: #000;
      display: flex;
      align-items: center;
      opacity: 0.7;
      color: #dde0df;
      font-size: 26rpx;
      padding: 4rpx 20rpx;
      border-top-left-radius: 50rpx;
      border-bottom-left-radius: 50rpx;

      .pic_index {
        color: #fff;
        font-size: 30rpx;
      }
    }
  }

  .course {
    padding: 26rpx;
    //padding-bottom: 40rpx;
    // margin-top: -20rpx;
    background: #262626;
    z-index: 99;
    position: sticky;
    border-radius: 24rpx;

    .c_title {
      display: flex;
      //align-items: center;
      justify-content: space-between;
      //margin-bottom: 20rpx;

      .c_tit {
        color: #fff;
        width: 90%;

        .eyebox {
          display: flex;
          align-items: center;
          margin-top: 5rpx;

          image {
            width: 40rpx;
            height: 40rpx;
            display: block;
          }

          .ViewNum {
            font-size: 24rpx;
          }
        }
      }

      .c_icon {
        width: 50rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
      }
    }
  }

  .course_deatil {
    padding: 22rpx 0rpx;
    margin: 0 26rpx;
    border-top: 4rpx solid #3b3b3b;
    border-bottom: 4rpx solid #3b3b3b;

    view {
      color: #f5f5f5;
    }

    .tit {}

    .lit {
      margin: 10rpx 0;
      width: 100%;

      .lit_item {
        width: 100%;
        display: flex;

        // align-items: center;
        .icon {
          image {
            width: 40rpx;
            height: 40rpx;
          }

          margin-right: 10rpx;
        }

        .lit_text {
          width: 100%;
          font-size: 28rpx;

          text {
            color: #f5f5f5;
          }
        }

        .gap {
          font-size: 28rpx;
          display: flex;
          align-items: center;
        }
      }

      .lit_address {
        font-size: 26rpx;

        display: flex;
        justify-content: space-between;
        align-items: center;

        .address_tit {
          width: 75%;
          color: #a1a1a1;
        }

        .gap {
          display: flex;
          align-items: center;
        }
      }
    }

    .Description {
      .lit_text {
        color: #999;
        font-size: 28rpx;

        text {
          color: #999;
        }
      }
    }
  }

  .people {
    padding: 40rpx 0rpx;
    margin: 0 26rpx;

    // height: 320rpx;
    // overflow: hidden;
    .tit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .rollBtn{
        color: #7a7a7a;
      }
      .tit_nav {
        padding: 10rpx 26rpx;
        font-size: 28rpx;
        color: #a7a7a7;

        text {
          color: #a7a7a7;
        }
      }

      .tit_nav:first-child {
        padding-left: 0;
      }

      .tit_active {
        font-size: 30rpx;
        font-weight: bold;
        color: #fff;
        position: relative;

        text {
          color: #fff;
        }

        &::after {
          content: "";
          width: 70rpx;
          height: 6rpx;
          border-radius: 20rpx;
          background-color: #e0c48e;
          position: absolute;
          bottom: -8rpx;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    .peoplebox {
      padding: 26rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 4rpx solid #3b3b3b;

      view {
        color: #7a7a7a;
      }

      .p_info {
        display: flex;
        align-items: center;

        .head {
          width: 90rpx;
          height: 90rpx;
          overflow: hidden;
          border-radius: 50%;
          margin-right: 20rpx;
        }

        .user_box {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name_box {
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;

            .name {
              color: #7a7a7a;
            }
          }

          .user_lit {
            font-size: 26rpx;

            text {
              color: #7a7a7a;
            }
          }
        }
      }

      .p_time {
        font-size: 26rpx;
      }
    }

    .match_img {
      width: 100%;
      margin: 20rpx 0;
    }

    .bottom_lit {
      margin: 20rpx auto;
      text-align: center;
      font-size: 26rpx;
      color: #727272;
    }
  }

  .btn_box {
    width: 100%;
    box-sizing: border-box;
    margin-top: 30rpx;
    background-color: #262626;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 20rpx 26rpx;
    padding-bottom: 40rpx;

    .go_btn {
      border-radius: 50rpx;
      font-size: 30rpx;
      color: #4c310c;
      padding: 20rpx 0;
      text-align: center;
      background-image: linear-gradient(to right, #fef0bc, #b98b51);
    }

    .end_btn {
      border-radius: 50rpx;
      font-size: 30rpx;
      color: #4c310c;
      padding: 20rpx 0;
      text-align: center;
      background-image: linear-gradient(to right, #fefefe, #b9b9b9);

      text {
        color: #4c310c;
      }
    }
  }
}

.member {
  min-width: 90rpx;
  height: 32rpx;
  background: linear-gradient(135deg, #7e7e7e 0%, #292929 100%);
  border-radius: 2rpx;
  border: 2rpx solid #d6c6ab;
  text-align: center;
  color: #fff !important;
  font-size: 16rpx;
  line-height: 32rpx;
  margin-left: 10rpx;
}

.member_huan {
  color: #4c310c;
  background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
  border: 2rpx solid #e6ceb5;
}

.member_hei {
  color: #4c310c;
  background: linear-gradient(180deg, #ffffff 0%, #000000 100%);
  border: 2rpx solid #e6ceb5;
}

.member_hei_vip {
  color: #4c310c;
  background: linear-gradient(180deg, #ffffff 0%, #000000 100%);
  border: 2rpx solid #e6ceb5;
}

.member_wealth {
  width: 45rpx;
  height: 32rpx;
  background: linear-gradient(135deg, #deb214 0%, #f88410 100%);
  border-radius: 2rpx;
  border: 2rpx solid #d6c6ab;
  text-align: center;
  color: #fff;
  font-size: 16rpx;
  line-height: 32rpx;
  margin-left: 5rpx;
}

.x-share {
  background-color: #ffffff;
  width: 750rpx;
  border-radius: 20rpx;
  padding: 40rpx 20rpx 80rpx;
  display: flex;
  box-sizing: border-box;

  .item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    image {
      width: 64rpx;
      height: 64rpx;
      margin-bottom: 10rpx;
    }

    span {
      color: #2e2e2e;
    }
  }
}
.share_tips{
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
	position: relative;
	.tips_close{
		position: absolute;
		padding: 14rpx 24rpx;
		border-radius: 50rpx;
		border: 4rpx solid #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		top: 36%;
		left: 50%;
		transform: translate(-50%, 0);
		image{
			width: 100%;
			height: 100%;
		}
	}
}

.popBox {
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 199;

  .popMask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 200;
  }

  .popCenter {
    width: 100%;
    z-index: 202;

    .popContent {
      width: 600rpx;
      margin: 0 auto;
      border-radius: 32rpx;
      background: #111;
      padding: 20rpx 30rpx;

      .popTitle {
        position: relative;
        text-align: center;
        font-size: 38rpx;
        font-weight: bold;
        margin-bottom: 40rpx;
      }

      .popClose {
        position: absolute;
        top: 50%;
        right: 0rpx;
        transform: translateY(-50%);
        width: 50rpx;
        height: 50rpx;

        image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }

      .popInfo {
        width: 100%;

        .infoCell {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10rpx 8rpx;
          margin: 10rpx 0;

          .infoName {
            width: 134rpx;
            text-align: justify;
          }

          .infoInp {
            flex: 1;
            padding: 0 16rpx;
          }

          .infoFPrice {
            flex: 1;
            text-align: right;
          }

          .payTips {
            font-size: 24rpx;
            color: #ab9e9e;
          }
        }
      }

      .popTake {
        width: 100%;
        padding: 40rpx 0;

        .popPay {
          width: fit-content;
          border-radius: 18rpx;
          background-image: linear-gradient(to bottom, #fcdfab, #f0d46d);
          padding: 30rpx 148rpx;
          box-sizing: border-box;
          word-break: keep-all;
          color: black;
          font-weight: 600;
          font-size: 26rpx;
          margin: 0 auto;
        }
      }
    }
  }
}

.wrap{
	// padding: 20rpx 0rpx;
	view{color: #333;}
	.vague{
		position: fixed;
		top: 46vh;
		left: 0;
		width: 100%;
		height: 50rpx;
		background-image: linear-gradient(180deg,rgba(253,244,255,0),rgba(253,244,255,1));
		backdrop-filter: blur(1px);
	}
	.teacher {
	  box-sizing: border-box;
	  position: relative;
	  height: 750rpx;
		
	  swiper {
	    width: 100%;
	    height: 100%;
	  }
	
	  .swiper-item {
	    width: 100%;
	    height: 100%;
	    background-color: #000;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			// .mackBox{
			// 	position: absolute;
			// 	bottom: 0;
			// 	left: 0;
			// 	width: 100%;
			// 	height: 80rpx;
			// 	background: linear-gradient(to top, #FDF4FF, rgba(255, 255, 255, 0))
			// }
			&::after{
				content: '';
				position: absolute;
				width: 100%;
				height: 160rpx;
				bottom: 0;
				left: 0;
				background: linear-gradient(0deg, rgba(253,244,255, 1) 0%, rgba(253,244,255, 0) 100%); /* 渐变颜色 */
			}
	  }
	
	  .num {
	    position: absolute;
	    right: 0;
	    bottom: 50rpx;
	    background-color: #000;
	    display: flex;
	    align-items: center;
	    opacity: 0.7;
	    color: #dde0df;
	    font-size: 26rpx;
	    padding: 4rpx 20rpx;
	    border-top-left-radius: 50rpx;
	    border-bottom-left-radius: 50rpx;
	
	    .pic_index {
	      color: #fff;
	      font-size: 30rpx;
	    }
	  }
	}
	
	.main_body{
		padding: 0 40rpx;
		.title_body{
			margin-top: 20rpx;
			.title_tit{
				font-weight: 900;
				font-size: 34rpx;
				color: #111;
			}
			.title_time{
				margin-top: 16rpx;
				font-size: 26rpx;
				color: #111;
				font-weight: 400;
			}
			.title_site{
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.site_name{
					display: flex;
					align-items: center;
					width: 75%;
					.site_icon{
						width: 20rpx;
						height: 32rpx;
						display: flex;
						align-items: center;
						margin-right: 6rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.site_tit{
						flex: 1;
						overflow: hidden;  /*超出部分隐藏*/
						white-space: nowrap;  /*禁止换行*/
						text-overflow: ellipsis; /*省略号*/
						font-size: 24rpx;
						color: #666666;
					}
				}
				.site_distance{
					display: flex;
					align-items: center;
					.count{
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}
		.sign_body{
			margin-top: 32rpx;
			padding: 32rpx;
			background: #e3dbe5;
			border-radius: 24rpx;
			.sign_cell{
				.sign_tit{
					text{
						font-size: 24rpx;
						color: #666666;
					}
					.sign_count{
						font-weight: bold;
						font-size: 32rpx;
						color: #3443f4;
						margin-right: 4rpx;
					}
					.sign_lit{
						color: #3443f4;
					}
				}
				.sign_content{
					margin-top: 28rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.sign_text{
						width: 100%;
						margin: 10rpx 0 ;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 30rpx;
						font-weight: bold;
						color: #999;
					}
					.sign_img{
						display: flex;
						image{
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							margin-right: 8rpx;
						}
					}
					.sign_more{
						display: flex;
						align-items: center;
						.more_text{
							font-size: 24rpx;
							color: #999999;
							margin-right: 4rpx;
						}
					}
				}
			}
		}
		
		.tab_body{
			margin-top: 48rpx;
			.tab_head{
				display: flex;
				align-items: center;
				justify-content: center;
				.tab_cell{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 33.33%;
					font-size: 28rpx;
					color: #666666;
					text{
						font-size: 28rpx;
						color: #666666;
					}
				}
				.tab_active{
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					position: relative;
					text{
						font-size: 32rpx;
						color: #333333;
					}
					&::after{
						content: '';
						position: absolute;
						bottom: -16rpx;
						left: 50%;
						transform: translate(-50%,0);
						width: 30rpx;
						height: 10rpx;
						background: #3443f4;
						border-radius: 8rpx;
					}
				}
			}
			.tab_main{
				.tab_word{
					margin-top: 46rpx;
					padding: 32rpx;
					background: #e3dbe5;
					border-radius: 16rpx;
					.word_cell{
						display: flex;
						align-items: center;
						margin-bottom: 24rpx;
						&:last-child{
							margin-bottom: 0;
						}
						.word_icon{
							width: 32rpx;
							height: 32rpx;
							margin-right: 20rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.word_content{
							text{
								font-size: 28rpx;
								color: #333333;
							}
							.word_tit{
								color: #666666;
							}
						}
					}
				}
				.tab_prove{
					margin-top: 24rpx;
					padding: 32rpx;
					background: #e3dbe5;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.prove_cell{
						display: flex;
						align-items: center;
						.prove_icon{
							width: 68rpx;
							height: 36rpx;
							margin-right: 12rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.prove_text{
							font-size: 28rpx;
							color: #333333;
						}
					}
				}
				.tab_blurb{
					.blurb_cell{
						margin-top: 48rpx;
						.blurb_tit{
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
							display: flex;
							align-items: center;
							.blurb_tag{
								width: 6rpx;
								height: 30rpx;
								background: #3443f4;
								border-radius: 4rpx;
								margin-right: 8rpx;
							}
						}
						.blurb_content{
							margin-top: 32rpx;
							rich-text{
								font-size: 28rpx;
								line-height: 42rpx;
							}
							.blurb_btn{
								width: 100%;
								padding: 10rpx 0;
								text-align: center;
								font-size: 28rpx;
								font-weight: bold;
								
							}
						}
					}
				}
			}
		}
		
		.btn_body{
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 97;
			padding: 20rpx 32rpx;
			padding-bottom: 50rpx;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			border-radius: 48rpx 48rpx 0 0;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(20,20,20,0.07);
			.btn_share{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-left: 38rpx;
				.btn_icon{
					width: 32rpx;
					height: 32rpx;
					margin-bottom: 6rpx;
				}
				.btn_tit{
					font-size: 20rpx;
					color: #333333;
				}
			}
			.btn_cell{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 64rpx;
				font-weight: 700;
				font-size: 26rpx;
				color: #FFFFFF;
				// background: #0D0D0D;
				background-image: linear-gradient(90deg, #a160e2 0%, #3241f4 100%);
				border-radius: 30rpx;
			}
			.btn_cancel{
				background: #b9b9b9;
			}
		}
	}
	
	
	.signUser{
		border-radius: 24rpx 24rpx 0 0;
		background-color: #fff;
		padding: 24rpx;
		padding-bottom: 50rpx;
		box-sizing: border-box;
		.sign_content{
			
			.signup_tit{
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 0;
				position: relative;
				.tit{
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}
				.signup_close{
					position: absolute;
					right: 0;
					width: 64rpx;
					height: 64rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 70%;
						height: 70%;
					}
				}
			}
			.signup_main{
				max-height: 55vh;
				overflow-y: scroll;
				.signup_content{
					
					.content_cell{
						margin-bottom: 20rpx;
						font-size: 28rpx;
						color: #333;
					}
				}
				.peoplebox {
				  padding: 26rpx 0;
				  display: flex;
				  align-items: center;
				  justify-content: space-between;
				  border-bottom: 2rpx solid #ececec;
					&:last-child{
						border: 0;
					}
				  view {
				    color: #333;
				  }
				
				  .p_info {
				    display: flex;
				    align-items: center;
				
				    .head {
				      width: 90rpx;
				      height: 90rpx;
				      overflow: hidden;
				      border-radius: 50%;
				      margin-right: 20rpx;
				    }
				
				    .user_box {
				      display: flex;
				      flex-direction: column;
				      justify-content: space-between;
				
				      .name_box {
				        display: flex;
				        align-items: center;
				        margin-bottom: 10rpx;
				
				        .name {
				          color: #333;
				        }
				      }
				
				      .user_lit {
				        font-size: 26rpx;
								color: #7a7a7a;
								view{
									color: #7a7a7a;
								}
				        text {
				          color: #7a7a7a;
				        }
				      }
				    }
				  }
				
				  .p_time {
				    font-size: 26rpx;
				  }
				}
			}
			.signup_null{
				width: 100%;
				height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
			}
		}
		.signup_copy{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 88rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			background: #0D0D0D;
			border-radius: 44rpx;
		}
	}
}
.cirlist {
  // width: 702rpx;
  // height: 548rpx;
  border-radius: 24rpx;
  padding: 24rpx;
  // background-color: #9796ed;
  margin: 0 auto;
  margin-top: 24rpx;
	background-size: cover;
	background-repeat:no-repeat;
	
  position: relative;

  .blackshadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 24rpx;
    backdrop-filter: blur(10px);

  }

  .cirinfobox {
    display: flex;
    align-items: center;
    // margin-bottom: 32rpx;
		justify-content: space-between;
    position: relative;
    z-index: 10;

    .hdimg {
      width: 100rpx;
      height: 100rpx;
      border-radius:50%;
			box-sizing: border-box;
      border: 4rpx solid #FFFFFF;
      margin-right: 24rpx;
    }

    .cirinfo {
      flex: 0.95;
      .cirname {
        font-size: 30rpx;
        font-weight: 700;
        color: #fff;
        margin-bottom: 12rpx;
      }

      .cirrem {
        width: 360rpx;
        font-size: 22rpx;
        color: rgba(255, 255, 255, 0.6);
      }
    }

    .cirjoin {
      width: 110rpx;
      height: 56rpx;
      background: #3443f4;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }

      .jointext {
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }
    .cirquit{
      width: 110rpx;
      height: 56rpx;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #E4E4E4;
      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }
      .jointext {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }

  .databox {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;

    .datatltie {
      margin-right: 56rpx;
      text-align: center;
      .datanum {
        font-size: 36rpx;
        font-weight: bold;
        color: #EFEFEF;
      }

      .datatext {
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }
  }
}
</style>
